<template>
	<!-- 搜索名称 下拉刷新会出现其他数据 -->
	<view class="body">
		<view>
			<uni-search-bar :radius="100" @input="search"></uni-search-bar>
		</view>
		<view style="display: inline-block;">
			<view class="body-data back" style="display: inline-block;height: calc(25vh);" v-for="(item,index) in goods" :key="index"
			 @click="toGoodsDetail(item)">
				<view class="" style="display: inline-block;position:sticky;width: calc(30vw);margin-top: calc(5vh);">
					<image :src="item.image ===null? 'null':item.image" style="width: calc(26vw);height: calc(15vh);"></image>
				</view>
				<view class="" style="display: inline-block;position: absolute; position:sticky;vertical-align: top;margin: calc(5vh) calc(1vw) 0 calc(1vh);width: calc(60vw);height:calc(36vw);">
					<view>
						<text style="font-size: medium; font-weight: 700;">{{item.name}}</text>
					</view>
					<!-- <view>
						<text v-for="(item,index) in 3" :key=index style="font-size: calc(1vh);margin: 0 calc(1vw) 0 calc(1vh);color:#FF0000;background-color: #ff5e62;">短视频</text>
					</view> -->
					<view style="font-size:35rpx;font-weight:700;color:#FF0000;">￥{{item.price}}</view>
					<view>
						<text style="font-size: medium;background-color:#CFB53B;">佣金:{{item.commission}}</text>
						<!-- <text style="font-size: calc(1vh);background-color:#CFB53B ;">销量：{{goods.sales}}件</text> -->
					</view>
					<view>
						<text style="font-size: medium;color: #CFB53B ;">{{item.shopName}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	export default {
		onReachBottom() {
			this.page = this.page + 1
			this.goodsList(0);
		},
		components: {
			uniSearchBar
		},
		onLoad() {
			this.goodsList(0);
		},
		data() {
			return {
				goods: [],
				page: 1,
				name: ''
			}
		},
		methods: {
			goodsList(index) {
				uni.request({
					url: 'http://zs.91gongju.cn:10003/goods/list/' + this.page,
					method: 'POST',
					data: {
						categoryId: '',
						name: this.name
					},
					success: (res) => {
						res.data.data.list.forEach((item, index) => {
							if (this.goods.length < res.data.data.total) {
								this.goods.push(item)
							} else {
								uni.showToast({
									title: '最后',
									duration: 2000
								});
							}
						})
					}
				});
			},
			search(e) {
				this.name = e.value;
				this.$http({
					url: '/goods/list/' + this.page,
					method: 'POST',
					token: false,
					data: {
						name: this.name
					},
				}).then(res => {
					this.goods = []
					res.data.data.list.forEach((item, index) => {
						if (this.goods.length < res.data.data.total) {
							this.goods.push(item)
						} else {
							uni.showToast({
								title: '最后',
								duration: 2000
							});
						}
					})
				});
			},
			toGoodsDetail(val) {
				uni.navigateTo({
					url: "/pages/goods/goodsDetails?id=" + val.id + "&userId=" + val.userId
				})
			}
		}
	}
</script>

<style>
	.body {
		background-color: #F1F1F1;
		height: 100%;
	}

	.body-data {
		display: flex;
		flex-direction: column;
		width: calc(94vw);
		border-radius: calc(1vw);
		margin: calc(1vh) calc(2vw) 0 calc(2vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.back {
		background-color: #FFFFFF;
	}
</style>
